<template>
  <Layout :layoutOption="layoutOption">
    <template #aside>
      <Menu :menus="menuData"></Menu>
    </template>

    <router-view v-slot="{ Component }">
      <transition name="el-fade-in">
        <!-- <transition :name="route.meta.transition as string"> -->
        <component :is="Component" />
      </transition>
    </router-view>
  </Layout>
</template>

<script setup lang="ts">
  import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
  import { onBeforeMount, ref } from 'vue';
  import menuData from '@/router/menu'

  const layoutOption = ref({
    hasBread: false,
    hasFooter: false,
    hasAside: true,
    hasHeader: true,
    ignoreMainPadding: false
  })

  onBeforeMount(() => {
    if (qiankunWindow.__POWERED_BY_QIANKUN__) {
      layoutOption.value.hasBread = false
      layoutOption.value.hasFooter = false
      layoutOption.value.hasHeader = false
      layoutOption.value.hasAside = false
      layoutOption.value.ignoreMainPadding = true
    }
  })

</script>

<style scoped>
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }

  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }

  .logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
  }
</style>
